(function ($) {
   
    $.fn.memorycardplay = function (options) {
        defaults = {
            imgs: Array(" ", " ", " ", " ", " ", " ", " ", " ", " "),
            endimg:""
        };
        var opts = $.extend({}, defaults, options);
        return this.each(function () {
            var pic = opts.imgs;
            var element = this;
            var location = new Array();
            var counter = 0;
            var preli = 0;
            var curli = 0;
            location = creatposition();

            //create new html elements           
            var gameHtmltitle = '<div class="cardlist"><p>Memory Card Game</p><ul>';
            var gameHtmlend = '</ul><img  id="gameend" src="' + opts.endimg + '" alt="" /></div>';
            var gameHtmlli = '';
            for (i = 0; i < 8; i++) {
                gameHtmlli += '<li> <img src="' + pic[8]+ '" alt="" /></li>';
            }
            var gamehtml = gameHtmltitle + gameHtmlli + gameHtmlend;
            $(element).html(gamehtml);

            //new elements css
            $(".cardlist").css({ margin: "0px", padding: "0px" });
            $(".cardlist>p").css({ font: "normal 12px Arial", width: "300px", padding: "2px 0px 4px 0px", margin: "0px" });
            $(".cardlist>p").css("background-color", "#e6ede7");
            $(".cardlist>p").css("text-align", "center");
            $(".cardlist>ul").css({ margin: "0px 0px 10px 0px", padding:"20px 20px",height: "120px",width: "300px"});
            $(".cardlist>ul>li").css({ display: "inline", cursor: "pointer", padding: "0px" });
            $(".cardlist>ul>li").css("text-align", "center");
            $(".cardlist>ul>li").css("list-style", "none");         
            $(".cardlist>ul>li>img").css({ border: "2px solid #ccc",margin:"5px 5px",float:"left",padding:"0px"});
            $("#gameend").css({position: "absolute",top:"70px",left: "50px",border: "0px",display: "none"});
         
          
            //click li to play game
            $(".cardlist>ul>li").click(function () {

                if (counter > 1)
                    return;
                if (counter == 0) {  //first card show 
                    preli = $(this).index();
                    //  alert(pic[location[preli]]);
                    $(this).children("img").attr("src", pic[location[preli]]);
                    counter++;

                }
                else if (counter == 1 && $(this).children("img").attr("src") == pic[8]) { //second card
                    counter++;
                    curli = $(this).index();

                    if (pic[location[preli]] == pic[location[curli]]) //second card=firstcard ,hidden;
                    {
                        // hide second img and add finish class
                        $(this).children("img").attr("src", pic[location[curli]]);
                        $(this).children("img").fadeOut("slow", function () {
                            $(this).fadeIn("slow", function () {
                                $(".cardlist>ul>li").eq(curli).css("visibility", "hidden");
                                $(".cardlist>ul>li").eq(curli).addClass("finish");
                                counter = 0;
                            });
                        });
                        // hide fisrt img and add finish class
                        $(".cardlist>ul>li").eq(preli).children("img").fadeOut("slow", function () {
                            $(this).fadeIn("slow", function () {
                                $(".cardlist>ul>li").eq(preli).css("visibility", "hidden");
                                $(".cardlist>ul>li").eq(preli).addClass("finish");

                                // get count li of (finish class) ,if =8  gameover
                                if ($("[class='finish']").length == 8) {
                                    $("#gameend").show("slow");
                                }
                                counter = 0;
                            });
                        });
                    }
                    else //second card != first card show second card  then chang img to backimg;
                    {
                        //show second card image
                        $(this).children("img").attr("src", pic[location[curli]]);

                        //change second second img to cardback image
                        $(this).children("img").fadeOut("slow", function () {
                            $(this).fadeIn("slow", function () {
                                $(this).attr("src", pic[8]);
                                counter = 0;

                            });
                        });
                        //change first card img to cardback image
                        $(".cardlist>ul>li").eq(preli).children("img").fadeOut("slow", function () {
                            $(this).fadeIn("slow", function () {
                                $(this).attr("src", pic[8]);
                                counter = 0;
                            });
                        });
                    }
                }
            });
        });
    };

    function creatposition() {
        var arrNum = new Array(-1, -1, -1, -1, -1, -1, -1, -1); //Radom number array
        var i = 0;
        var j = 0;
        var temp = 0;
        var isFlag = false;  //new radom number whether has generated

        while (i < arrNum.length) {
            temp = Math.floor(Math.random() * (arrNum.length));
            //check the new radom number whether has generate
            for (j = 0; j < arrNum.length; j++) {
                if (arrNum[j] == temp) {
                    isFlag = true;
                }
            }
            //if new radom number is not exist ,add it to array
            if (isFlag == false) {
                arrNum[i] = temp;
                i++;
            }
            //chage flag , default is  false = not exist
            isFlag = false;
        }
        return arrNum;
    }

})(jQuery);
